<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <FileTree class="w-1/4 xl:w-1/6" @select="handleSelect" />
    <CardList
      class="w-3/4 xl:w-5/6"
      :params="params"
      :api="getFileList"
      @get-method="getMethod"
      @delete="handleDelete"
      @edit="handleUpdate"
    >
      <template #header>
        <Upload
          name="file"
          multiple
          :showUploadList="false"
          :headers="headers"
          @change="handleChange"
          :before-upload="beforeUpload"
          :action="uploadUrl"
          :data="{ pid: params.pid }"
          accept=".jpg,.jpeg,.gif,.png"
        >
          <Button type="primary"> 上传图片 </Button>
        </Upload>
      </template>
    </CardList>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, reactive } from 'vue';
  import { Upload } from 'ant-design-vue';
  import { CardList } from '@/components/CardList';
  import { Button } from '@/components/Button';
  import { PageWrapper } from '@/components/Page';
  import { getFileList, deleteFile, updateFileName } from '@/api/app/uploadPictures';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useGlobSetting } from '@/hooks/setting';
  import { getToken } from '@/utils/auth';
  import FileTree from './FileTree.vue';
  import { basicProps } from './file.data';

  interface FileItem {
    uid: string;
    name?: string;
    status?: string;
    response?: string;
    url?: string;
  }

  interface FileInfo {
    file: FileItem;
    fileList: FileItem[];
  }

  export default defineComponent({
    name: 'FileManagement',
    components: { CardList, PageWrapper, FileTree, Upload, Button },
    props: {
      ...basicProps,
    },
    setup(props) {
      const params = reactive<Recordable>({});
      const { createMessage } = useMessage();
      const { uploadUrl } = useGlobSetting();

      // 请求之前处理config
      const token = getToken();
      let reload = () => {};
      // 获取内部fetch方法;
      function getMethod(m: any) {
        reload = m;
      }

      // // 请求api时附带参数
      // const params = {
      //   pid: 0,
      // };

      // 选择分类事件
      function handleSelect(pid = 0) {
        params.pid = pid;
        reload();
      }
      // 删除按钮事件
      async function handleDelete(id: any) {
        await deleteFile({ ids: id }).then(() => {
          createMessage.success('成功删除');
          reload();
        });
      }

      async function handleUpdate(item: any) {
        if (item.real_name == '') {
          createMessage.error('请填写内容');
        }

        updateFileName(item.att_id, {
          real_name: item.real_name,
        }).then(() => {
          // this.editName(item);
          item.isEdit = false;
          createMessage.success('修改成功');
        });

        console.log(item, '6666666666666666666666666666666');
      }

      // 上传前校验
      function beforeUpload(file: File) {
        const { size, name, type } = file;
        // 控制文件上传格式
        const imgTypeArr = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
        const imgType = imgTypeArr.indexOf(type) !== -1;
        if (!imgType) {
          createMessage.warning('文件  ' + name + '  格式不正确, 请选择格式正确的图片');
          return false;
        }

        const { maxSize } = props;
        // 设置最大值，则判断
        if (maxSize && size / 1024 / 1024 >= maxSize) {
          createMessage.error('文件体积过大,图片大小不能超过' + maxSize + 'M');
          return false;
        }

        return file;
      }

      const handleChange = (info: FileInfo) => {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList, 'tttttttttttttttttttttttttttt');
        }
        if (info.file.status === 'done') {
          createMessage.success('上传成功');
          reload();
        } else if (info.file.status === 'error') {
          createMessage.error(`${info.file.name} 文件上传失败`);
        }
      };

      return {
        headers: {
          authorization: 'Bearer ' + token,
        },
        getFileList,
        getMethod,
        handleDelete,
        handleUpdate,
        handleSelect,
        params,
        uploadUrl,
        handleChange,
        beforeUpload,
      };
    },
  });
</script>
<style lang="less">
  .m-4 {
    margin: none;
  }

  .p-2 {
    padding: 1rem;
  }
</style>
